<template>
  <div class="usage-guide-container">
    <div class="header">
      <div class="header-left" @click="action.back">
        <ChevronLeftIcon class="icon" /> 返回
      </div>
      <div class="header-center">
        <div class="title">使用说明</div>
      </div>
    </div>

    <div class="content">
      <div class="guide-section">
        <h2>系统使用流程</h2>
        <div class="process-steps">
          <div class="step-item">
            <div class="step-number">1</div>
            <div class="step-content">
              <div class="step-title">配置环境</div>
              <div class="step-desc">设置服务器IP和API密钥</div>
            </div>
          </div>
          <div class="step-item">
            <div class="step-number">2</div>
            <div class="step-content">
              <div class="step-title">语音学习</div>
              <div class="step-desc">上传带语音的视频进行学习</div>
            </div>
          </div>
          <div class="step-item">
            <div class="step-number">3</div>
            <div class="step-content">
              <div class="step-title">语音合成</div>
              <div class="step-desc">合成需要的语音文件</div>
            </div>
          </div>
          <div class="step-item">
            <div class="step-number">4</div>
            <div class="step-content">
              <div class="step-title">批量处理</div>
              <div class="step-desc">进行批量视频处理</div>
            </div>
          </div>
        </div>
      </div>

      <div class="guide-section">
        <t-alert theme="warning" title="重要提示">
          <template #message>
            <p>
              批量处理只处理中、英文的文章
            </p>
            <p>
              小语种需要先进行语音合成，暂时不支持小语种的批处理合成
            </p>
            <p>
              训练视频越长，加载的时间就会越久
            </p>
          </template>
        </t-alert>
      </div>

      <div class="guide-section">
        <h2>详细步骤说明</h2>
        <div class="detailed-steps">
          <div class="detailed-step">
            <div class="step-header">
              <div class="step-label">步骤 1：配置环境</div>
            </div>
            <div class="step-details">
              <ul>
                <li>在【服务器配置】页面设置正确的IP地址</li>
                <li>在【API密钥管理】页面添加并启用OpenAI API密钥</li>
                <li>确保网络连接正常，能够访问相关服务</li>
              </ul>
            </div>
          </div>

          <div class="detailed-step">
            <div class="step-header">
              <div class="step-label">步骤 2：语音学习</div>
            </div>
            <div class="step-details">
              <ul>
                <li>需要先上传带有语音的视频进行学习</li>
                <li>系统会从视频中提取语音特征，用于后续合成</li>
                <li>确保上传的视频质量良好，声音清晰</li>
              </ul>
            </div>
          </div>

          <div class="detailed-step">
            <div class="step-header">
              <div class="step-label">步骤 3：语音合成</div>
            </div>
            <div class="step-details">
              <ul>
                <li>选择适合的声音模型和语言类型</li>
                <li>输入或粘贴需要合成的文本内容</li>
                <li>小语种文本必须在此步骤合成，不支持在批量处理中直接处理</li>
              </ul>
            </div>
          </div>

          <div class="detailed-step">
            <div class="step-header">
              <div class="step-label">步骤 4：批量处理</div>
            </div>
            <div class="step-details">
              <ul>
                <li>选择需要处理的文本或已合成的语音文件</li>
                <li>设置相关参数后开始批量处理</li>
                <li>系统将自动完成视频生成并保存结果</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="guide-section">
        <h2>语言支持说明</h2>
        <div class="language-support">
          <div class="language-item">
            <div class="language-type">中文和英文</div>
            <div class="language-desc">
              <t-tag theme="success">直接支持</t-tag>
              <span>可在批量处理时直接输入文本进行处理</span>
            </div>
          </div>
          <div class="language-item">
            <div class="language-type">小语种（如法语、德语、日语等）</div>
            <div class="language-desc">
              <t-tag theme="warning">需要预处理</t-tag>
              <span>必须先在语音合成页面生成对应语言的语音文件，然后再用于批量处理</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {
  ChevronLeftIcon,
} from 'tdesign-icons-vue-next';

const router = useRouter();

const action = {
  // 返回上一页
  back() {
    router.push("/home");
  }
};
</script>

<style lang="less" scoped>
.usage-guide-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;  // 深色背景改为白色
  color: #333333;  // 白色文字改为深灰色

  .header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 23px;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    background-color: #ffffff;  // 深色背景改为白色
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色

    &-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      gap: 6px;
      cursor: pointer;
      padding-right: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.15);  // 半透明白色边框改为半透明黑色
      -webkit-app-region: no-drag;

      .icon {
        font-size: 20px;
      }
    }

    &-center {
      flex: 1;
      text-align: center;

      .title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;  // 白色文字改为深灰色
      }
    }
  }

  .content {
    flex: 1;
    padding: 20px;
    overflow: auto;
  }

  .guide-section {
    margin-bottom: 32px;

    h2 {
      margin-bottom: 16px;
      font-size: 20px;
      color: #333333;  // 白色文字改为深灰色
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);  // 半透明白色边框改为半透明黑色
    }

    :deep(.t-alert) {
      background-color: rgba(255, 119, 11, 0.1);  // 保留原有的警告色背景
      border-color: rgba(255, 119, 11, 0.3);  // 保留原有的警告色边框
      margin-bottom: 20px;
    }

    :deep(.t-alert__title) {
      color: #333333;  // 白色文字改为深灰色
    }
  }

  /* 流程步骤样式 */
  .process-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;

    .step-item {
      display: flex;
      align-items: flex-start;
      padding: 16px;
      background-color: #f5f5f5;  // 深色背景改为浅灰色
      border-radius: 6px;
      border-left: 4px solid var(--td-brand-color);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感

      .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background-color: var(--td-brand-color);
        color: white;  // 数字保持白色，因为背景是品牌色
        border-radius: 50%;
        font-weight: bold;
        margin-right: 16px;
      }

      .step-content {
        display: flex;
        flex-direction: column;

        .step-title {
          font-weight: 500;
          font-size: 16px;
          margin-bottom: 4px;
          color: #333333;  // 添加颜色，确保是深色
        }

        .step-desc {
          color: rgba(0, 0, 0, 0.7);  // 半透明白色改为半透明黑色
          font-size: 14px;
        }
      }
    }
  }

  /* 详细步骤说明样式 */
  .detailed-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .detailed-step {
      background-color: #f5f5f5;  // 深色背景改为浅灰色
      padding: 16px;
      border-radius: 6px;
      border: 1px solid #e0e0e0;  // 添加边框增强视觉定义

      .step-header {
        margin-bottom: 12px;

        .step-label {
          font-weight: 500;
          font-size: 16px;
          color: var(--td-brand-color);  // 保留品牌色
        }
      }

      .step-details {
        ul {
          margin: 0;
          padding-left: 20px;

          li {
            color: rgba(0, 0, 0, 0.8);  // 半透明白色改为半透明黑色
            margin-bottom: 8px;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  /* 语言支持说明样式 */
  .language-support {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .language-item {
      padding: 16px;
      background-color: #f5f5f5;  // 深色背景改为浅灰色
      border-radius: 6px;
      border: 1px solid #e0e0e0;  // 添加边框增强视觉定义

      .language-type {
        font-weight: 500;
        margin-bottom: 12px;
        color: #333333;  // 添加颜色，确保是深色
      }

      .language-desc {
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(0, 0, 0, 0.8);  // 半透明白色改为半透明黑色
      }
    }
  }
}
</style>

